<template>
	<view class="u-page">
		<!-- search -->
		<view class="header-search">
			<u-search :show-action="true" placeholder="请输入关键词" border-color="#D7D7D7"
			search-icon-color="#3E3E3E" v-model="keyword" action-text="搜索" 
			:clearabled="true" height="50"></u-search>
		</view>
		<!-- city -->
		<u-dropdown>
			<u-dropdown-item v-model="value1" title="城市" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="区县" :options="options2"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="乡镇" :options="options2"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="村子" :options="options2"></u-dropdown-item>
		</u-dropdown>
		<!-- content -->
		<view class="wrap">
			<!-- tabs -->
			<view class="u-tabs-box">
				<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="wrap-content" v-for="x in 5">
				<view class="content-imgs">
					<u-image src="../../static/image/h3.png" v-for="i in 3"></u-image>
				</view>
				<view class="content-text">
					<text>青岩古镇有很多美食,其中小吃最受欢迎,我知道的就有:糕粑稀饭、玫瑰冰粉、黄老伯玫 瑰糖、状元蹄(卤猪脚)等</text>
				</view>
				<view class="content-author">
					<u-avatar size="30"></u-avatar>
					<text class="name">魅力十足</text>
					<u-icon name="thumb-up"></u-icon>
					<text class="number">12412</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 2,
				keyword: "",
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				tabsList: [
					{
						name: '习俗'
					},
					{
						name: '景点'
					},
					{
						name: '餐饮'
					},
					{
						name: '民族'
					},
					{
						name: '历史'
					}
				],
				current: 2,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore','loadmore','loadmore','loadmore', 'loadmore'],
			}
		},
		onLoad() {
			this.getOrderList(0);
		},
		methods: {
			// 页面数据
			getOrderList(idx) {
				// 发起请求调用接口
			},
			// tab栏切换
			change(index) {
				this.current = index
				this.getOrderList(index);
			}
		}
	}
</script>
<style scoped lang="less">
	.u-page{
		.header-search{
			display: flex;
			padding: 13px;
			justify-items: center;
			.u-search{
				flex: 2;
				margin-left: 20rpx !important;
			}
		}
		.wrap{
			.wrap-content{
				border-bottom: 1px solid #eee;
				margin: 24rpx;
				.content-imgs{
					display: flex;
					.u-image{
						width: 100%;
						padding: 5rpx;
						height: 180rpx !important;
					}
					margin-bottom: 12rpx;
				}
				.content-text{
					font-size: 20rpx;
					font-family: SimHei;
					font-weight: 500;
					color: #120909;
				}
				.content-author{
					display: flex;
					justify-items: center;
					align-items: center;
					margin: 26rpx;
					.u-icon{
						margin-left: 88rpx;
					}
					.name, .number,{
						font-size: 18rpx;
						margin-left: 15rpx;
					}
				}
			}
		}
	}
</style>